<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>web-ui-border</title>
<link href="../css/960.css" rel="stylesheet" type="text/css" />
<link href="../css/webui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.borderbox {
	height: 150px;
	font-family: Arial;
	background: #fff;
}

.border {
	height: 30px;
}

.borderbox p {
	height: 120px;
	line-height: 120px;
	text-align: center;
}
</style>
</head>
<body class="noisebg2">
	<div class="container_12">

		<div class="head  macbg2 grid_12">
			<div class="logo grid_8 alpha">
				<h1 class="white">WebUI</h1>
			</div>
			<div class="grid_4 omega">
				<ul class=" linkbar white">
					<li><a href="#">welcome: Mr </a></li>
					<li><a href="#" class="orange-l1">my account </a></li>
					<li><span>my account </span></li>
				</ul>
			</div>
		</div>

		<div class="clear"></div>
		<div class="spacer"></div>

		<div class="panel-open grid_12">
			<div class="phead  red">
				<h1>边框样例</h1>
			</div>
			<div class="pcontent">

				<div class="grid_2 borderbox alpha">
					<div class="border redbg">&nbsp;</div>
					<p class="redbd">redbd #cc0000</p>
				</div>
				<div class="grid_2 borderbox ">
					<div class="border redbg-l1 ">&nbsp;</div>
					<p class="redbd-l1">redbd-l1 #ff3019</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border redbg-l2">&nbsp;</div>
					<p class="redbd-l2">redbd-l2 #ff5c5c</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border redbg-d1">&nbsp;</div>
					<p class="redbd-d1">redbd-d1 #a90329</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border redbg-d2">&nbsp;</div>
					<p class="redbd-d2">redbd-d2 #6d0019</p>
				</div>
				<div class="grid_2 borderbox omega">
					<div class="border graybg">&nbsp;</div>
					<p class="graybd">graybd</p>
				</div>


				<div class="clear"></div>
				<div class="spacer"></div>

				<div class="grid_2 borderbox alpha">
					<div class="border autumnbg">&nbsp;</div>
					<p class="autumnbd">autumnbd #c8640e</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border autumnbg-l1">&nbsp;</div>
					<p class="autumnbd-l1">autumnbd-l1 #F4AD45</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border autumnbg-l2">&nbsp;</div>
					<p class="autumnbd-l2">autumnbg-l2 #febf04</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border autumnbg-d1">&nbsp;</div>
					<p class="autumnbd-d1">autumnbd-d1 #a3460b</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border autumnbg-d2">&nbsp;</div>
					<p class="autumnbd-d2">autumnbd-d2 #722104</p>
				</div>
				<div class="grid_2 borderbox omega">
					<div class="border graybg-l1">&nbsp;</div>
					<p class="graybd-l1">graybd-l1</p>
				</div>



				<div class="clear"></div>
				<div class="spacer"></div>

				<div class="grid_2 borderbox alpha">
					<div class="border orangebg">&nbsp;</div>
					<p class="orangebd">orangebd #ff7b0d</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border orangebg-l1">&nbsp;</div>
					<p class="orangebd-l1">orangebd-l1 #ffaf4b</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border orangebg-l2">&nbsp;</div>
					<p class="orangebd-l2">orangebd-l2 #ffb76b</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border orangebg-d1">&nbsp;</div>
					<p class="orangebd-d1">orangebd-d1 #ff7400</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border orangebg-d2">&nbsp;</div>
					<p class="orangebd-d2">orangebd-d2 #ff670f</p>
				</div>
				<div class="grid_2 borderbox omega">
					<div class="border graybg-l1">&nbsp;</div>
					<p class="graybd-l1">graybd-l1</p>
				</div>




				<div class="clear"></div>
				<div class="spacer"></div>

				<div class="grid_2 borderbox alpha">
					<div class="border pinkbg">&nbsp;</div>
					<p class="pinkbd">pinkbd #ff5db1</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border pinkbg-l1">&nbsp;</div>
					<p class="pinkbd-l1">pinkbd-l1 #ff7cd8</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border pinkbg-l2">&nbsp;</div>
					<p class="pinkbd-l2">pinkbd-l2 #FFADE6</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border pinkbg-d1">&nbsp;</div>
					<p class="pinkbd-d1">pinkbd-d1 #ef017c</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border pinkbg-d2">&nbsp;</div>
					<p class="pinkbd-d2">pinkbd-d2 #c10264</p>
				</div>
				<div class="grid_2 borderbox omega">
					<div class="border graybg-d2">&nbsp;</div>
					<p class="graybd-d1">graybd-d1</p>
				</div>










				<div class="clear"></div>
				<div class="spacer"></div>

				<div class="grid_2 borderbox alpha">
					<div class="border greenbg">&nbsp;</div>
					<p class="greenbd">greenbd #299a0b</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border greenbg-l1">&nbsp;</div>
					<p class="greenbd-l1">greenbd-l1 #6bba70</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border greenbg-l2">&nbsp;</div>
					<p class="greenbd-l2">greenbd-l2 #a9db80</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border greenbg-d1">&nbsp;</div>
					<p class="greenbd-d1">greenbd-d1 #006e2e</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border greenbg-d2">&nbsp;</div>
					<p class="greenbd-d2">greenbd-d2 #0B5426</p>
				</div>
				<div class="grid_2 borderbox omega">
					<div class="border graybg-l2">&nbsp;</div>
					<p class="graybd-l2">graybd-l2</p>
				</div>



				<div class="clear"></div>
				<div class="spacer"></div>

				<div class="grid_2 borderbox alpha">
					<div class="border greenbg2">&nbsp;</div>
					<p class="greenbd2">greenbd2 #80AC3A</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border greenbg2-l1">&nbsp;</div>
					<p class="greenbd2-l1">greenbd2-l1 #8fc400</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border greenbg2-l2">&nbsp;</div>
					<p class="greenbd2-l2">greenbd2-l2 #b6e026</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border greenbg2-d1">&nbsp;</div>
					<p class="greenbd2-d1">greenbd2-d1 #73880a</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border greenbg2-d2">&nbsp;</div>
					<p class="greenbd2-d2">greenbd2-d2 #41660E</p>
				</div>
				<div class="grid_2 borderbox omega">
					<div class="border graybg-d1">&nbsp;</div>
					<p class="graybd-d1">graybg-d1</p>
				</div>




				<div class="clear"></div>
				<div class="spacer"></div>

				<div class="grid_2 borderbox alpha">
					<div class="border greenbg3">&nbsp;</div>
					<p class="greenbd3">greenbd3 #378680</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border greenbg3-l1">&nbsp;</div>
					<p class="greenbd3-l1">greenbd3-l1 #4ca297</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border greenbg3-l2">&nbsp;</div>
					<p class="greenbd3-l2">greenbd3-l2 #92d0c8</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border greenbg3-d1">&nbsp;</div>
					<p class="greenbd3-d1">greenbd3-d1 #1e6464</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border greenbg3-d2">&nbsp;</div>
					<p class="greenbd3-d2">greenbd3-d2 #105457</p>
				</div>
				<div class="grid_2 borderbox omega">
					<div class="border graybg-d1">&nbsp;</div>
					<p class="graybd-d1">graybg-d1</p>
				</div>




				<div class="clear"></div>
				<div class="spacer"></div>

				<div class="grid_2 borderbox alpha">
					<div class="border earthbg">&nbsp;</div>
					<p class="earthbd">earthbd #bf8b3f</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border earthbg-l1">&nbsp;</div>
					<p class="earthbd-l1">earthbd-l1 #d19d50</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border earthbg-l2">&nbsp;</div>
					<p class="earthbd-l2">earthbd-l2 #daae6e</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border earthbg-d1">&nbsp;</div>
					<p class="earthbd-d1">earthbd-d1 #A87833</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border earthbg-d2">&nbsp;</div>
					<p class="earthbd-d2">earthbd-d2 #8E5502</p>
				</div>
				<div class="grid_2 borderbox omega">
					<div class="border graybg-d2">&nbsp;</div>
					<p class="graybd-d1">graybg-d1</p>
				</div>


				<div class="clear"></div>
				<div class="spacer"></div>

				<div class="grid_2 borderbox alpha">
					<div class="border coffeebg">&nbsp;</div>
					<p class="coffeebd">coffeebd #67594e</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border coffeebg-l1">&nbsp;</div>
					<p class="coffeebd-l1">coffeebd-l1 #7f6d5f</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border coffeebg-l2">&nbsp;</div>
					<p class="coffeebd-l2">coffeebd-l2 #928072</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border coffeebg-d1">&nbsp;</div>
					<p class="coffeebd">coffeebd-d1 #55483f</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border coffeebg-d2">&nbsp;</div>
					<p class="coffeebd-d2">coffeebd-d2 #41372e</p>
				</div>
				<div class="grid_2 borderbox omega">
					<div class="border graybg-d2">&nbsp;</div>
					<p class="graybd-d1">graybg-d1</p>
				</div>





				<div class="clear"></div>
				<div class="spacer"></div>

				<div class="grid_2 borderbox alpha">
					<div class="border bluebg">&nbsp;</div>
					<p class="bluebd">bluebd #105497</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border bluebg-l1">&nbsp;</div>
					<p class="bluebd-l1">bluebd-l1 #448ACD</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border bluebg-l2">&nbsp;</div>
					<p class="bluebd-l2">bluebd-l2 #6A9CCD</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border bluebg-d1">&nbsp;</div>
					<p class="bluebd-d1">bluebd-d1 #264A6D</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border bluebg-d2">&nbsp;</div>
					<p class="bluebd-d2">bluebg-d2 #04315C</p>
				</div>
				<div class="grid_2 borderbox omega">
					<div class="border graybg-d2">&nbsp;</div>
					<p class="graybd-d1">graybg-d1</p>
				</div>



				<div class="clear"></div>
				<div class="spacer"></div>

				<div class="grid_2 borderbox alpha">
					<div class="border skybg">&nbsp;</div>
					<p class="skybd">skybd #2cafe3</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border skybg-l1">&nbsp;</div>
					<p class="skybd-l1">skybd-l1 #7AD8F4</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border skybg-l2">&nbsp;</div>
					<p class="skybd-l2">skybd-l2 #a9e4f7</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border skybg-d1">&nbsp;</div>
					<p class="skybd-d1">skybd-d1 #4096ee</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border skybg-d2">&nbsp;</div>
					<p class="skybd-d2">skybd-d2 #207ce5</p>
				</div>
				<div class="grid_2 borderbox omega">
					<div class="border graybg-d2">&nbsp;</div>
					<p class="graybd-d1">graybg-d1</p>
				</div>


				<div class="clear"></div>
				<div class="spacer"></div>

				<div class="grid_2 borderbox alpha">
					<div class="border bluegraybg">&nbsp;</div>
					<p class="bluegraybd">bluegraybd #6393C1</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border bluegraybg-l1">&nbsp;</div>
					<p class="bluegraybd-l1">bluegraybd-l1 #85b2d3</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border bluegraybg-l2">&nbsp;</div>
					<p class="bluegraybd-l2">bluegraybd-l2 #d4e4ef</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border bluegraybg-d1">&nbsp;</div>
					<p class="bluegraybd-d1">bluegraybd-d1 #4f85bb</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border bluegraybg-d2">&nbsp;</div>
					<p class="bluegraybd-d2">bluegraybd-d2 #356aa0</p>
				</div>
				<div class="grid_2 borderbox omega">
					<div class="border graybg-d2">&nbsp;</div>
					<p class="graybd-d1">graybg-d1</p>
				</div>

				<div class="clear"></div>
				<div class="spacer"></div>

				<div class="grid_2 borderbox alpha">
					<div class="border graybluebg">&nbsp;</div>
					<p class="graybluebd">graybluebd #656678</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border graybluebg-l1">&nbsp;</div>
					<p class="graybluebd-l1">graybluebd-l1 #8788a0</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border graybluebg-l2">&nbsp;</div>
					<p class="graybluebd-l2">graybluebd-l2 #b7b8c9</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border graybluebg-d1">&nbsp;</div>
					<p class="graybluebd-d1">graybluebd-d1 #4f4e60</p>
				</div>
				<div class="grid_2 borderbox">
					<div class="border graybluebg-d2">&nbsp;</div>
					<p class="graybluebd-d2">graybluebg-d2 #393848</p>
				</div>
				<div class="grid_2 borderbox omega">
					<div class="border graybg-d2">&nbsp;</div>
					<p class="graybd-d1">graybg-d1</p>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="spacer"></div>
		<div class="grid_12 foot macbg2">
			<p>
				<a href="#" class="green">welcome: Mr </a> | <a href="#" class="orange-l1">my
					account </a> | <span>my account </span>
			</p>
			<p class="white">&copy; rights XXXXXXX公司 2001－2014</p>
		</div>
		<div class="clear"></div>
		<div class="spacer"></div>

	</div>
	<!--end container-->


</body>
</html>
